/**
 * 立即执行函数
 */
(function () {
  const container = document.querySelector('.container');

  const btn = document.querySelector('.btn4');

  // 创建一个1到10000的数组
  const array = Array.from({ length: 10000 }, (v, k) => k + 1);
  // 给btn 按钮天际是点击事件，点击后添加10000 个li
  btn.addEventListener('click', () => {
    performChunk(array, taskHandler, scheduler);
  });

  /**
   * 任务处理
   * @param {*} index
   */
  function taskHandler(index) {
    const li = document.createElement('li');
    li.innerText = array[index];
    console.log('执行任务', array[index]);
    container.appendChild(li);
  }

  /**
   * 调度器
   * @param {*} callback
   */
  function scheduler(callback) {
    // 浏览器环境
    if (window.requestIdleCallback) {
      window.requestIdleCallback((idle) => {
        const isGoOn = () => idle.timeRemaining() > 0;
        callback({ isGoOn });
      });
      return;
    }

    let start = Date.now();
    setTimeout(() => {
      // 理论上系统给你空闲的时间会低于50ms，所以你的任务最好不要超过50ms，否则还是会卡顿
      const isGoOn = () => Date.now() - start < 50;
      callback({ isGoOn });
    }, 0);
  }

  /**
   * 封装分时函数
   */
  function performChunk(datas, taskHandler, scheduler) {
    if (datas.length === 0) {
      return;
    }
    // 当前下标
    let i = 0;
    // 执行下一个任务
    function _run() {
      if (i > datas.length) {
        return;
      }

      scheduler(({ isGoOn }) => {
        console.log('执行下一个任务');
        while (isGoOn() && i < datas.length) {
          taskHandler(i);
          i++;
        }
        !isGoOn() && _run();
      });
    }
    _run();
  }
})();
